<template>
	<view class="storeBox">
		<view class="storeItem" @click="merchant()">
			<image class="storeImage" src="../../plantGrass/static/images/video_bg.png"></image>
			<view class="storeInfo">
				<view class="storeInfo_left">
					<text class="storeInfo_title">Migou</text>
					<view class="storeInfo_score">
						<view class="scoreBG"></view>
						<view class="score" :style="'width:'+((4.5 / 5) * 97)+'px'"></view>
						<text>5.0</text>
					</view>
					<text class="storeInfo_location">浙江省温州市瑞安市安阳新区塘河北路331号</text>
					<view class="storeInfo_rebate">
						<view class="rebateItem">
							<text class="rebateItem_title">积</text>
							<text class="rebateItem_content">3%</text>
						</view>
						<view class="rebateItem">
							<text class="rebateItem_title">积</text>
							<text class="rebateItem_content">5%</text>
						</view>
						<view class="rebateItem">
							<text class="rebateItem_title">积</text>
							<text class="rebateItem_content">20%</text>
						</view>
					</view>
				</view>
				<view class="storeInfo_right">
					<text class="storeInfo_state state_inoperation">营业中</text>
					<view class="storeInfo_distance">
						<image src="../../../static/images/shq_dw.png"></image>
						<text>24.9m</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	mounted() {
		
	},
	methods:{
		merchant()
		{
			uni.navigateTo({
				url:'/pages/other/shenghuoquan/merchant'
			})
		}
	},
	data() {
		return{}
	}
}
</script>

<style>
.storeItem{width: 94%; height: 130px; margin-top: 8px; display: flex; float: left; margin-left: 3%;}
.storeImage{width: 100px; height: 100px; float: left; margin-top: 10px; border-radius: 10px;}
.storeInfo{width: calc(100% - 110px); margin-left: 6px; height: 130px;  border-bottom: 1px solid #dadada;}
.storeInfo_left{width: calc(100% - 75px); float: left; height: 100px; margin-top: 10px;}
.storeInfo_title{width: 100%; height: 27px; float: left; line-height: 25px; font-size: 20px; font-weight: bold; color:#343434;}
.storeInfo_score{width: 100%; height: 20px; float: left;}
.scoreBG{width: 87px; height: 15px; float: left; position: relative; z-index: 1; margin-top: 2px; background: url(../../../static/images/shq_score_w.png); background-size: 87px 15px; background-repeat: no-repeat;}
.score{width: 0px; height: 15px; float: left; position: absolute; z-index: 2; margin-top: 2px; overflow: hidden; background: url(../../../static/images/shq_score.png); background-size: 87px 15px; background-repeat: no-repeat;}
.storeInfo_score text{float: left; font-size: 16px; height: 15px; line-height: 15px; margin-top: 2px; margin-left: 10px; font-weight: bold; color: #e93a41;}
.storeInfo_location{width: 100%; height: 20px; float: left; margin-top: 3px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; font-size: 14px; color: #9d9d9d;}
.storeInfo_rebate{width: 100%; height: 20px; float: left; margin-top: 5px;}
.rebateItem{width: auto; float: left; margin-right: 8px; background-color: rgba(87, 194, 125,0.1); height: 20px; border:1px solid #57c27d; border-radius: 5px; }
.rebateItem_title{width: 20px; height: 18px; line-height: 18px; text-align: center; float: left; overflow: hidden; font-size: 13px; color: #FFF; background-color: #57c27d; border-top-right-radius: 6px;}
.rebateItem_content{width: auto; height: 18px; float: left; padding: 0px 6px; line-height: 20px; font-size: 13px; color: #57c27d;}
.storeInfo_right{width: 70px; height: 100px; float: right; margin-top: 10px; align-items: center;}
.storeInfo_state{width: 100%; float: left; margin-top: 25px; height: 15px; line-height: 15px; text-align: right; font-size: 16px;}
.state_inoperation{color: #4bce87;}
.storeInfo_distance{width: auto; height: 20px; margin-top: 10px; float: right;}
.storeInfo_distance image{width: 20px; height: 20px; float: left;}
.storeInfo_distance  text{font-size: 14px; color:#1e1e1e; float: left; height: 20px; line-height: 20px;}
</style>